<template>
  <div>
    <Upload
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      action="#">
      <div style="width: 45px;height:55px;line-height: 55px;position: relative;">
        <Icon type="camera" size="20"></Icon>
        <div class="img" v-if="skuImg !== ''">
          <img :src="skuImg" alt="" width="55" height="55"/>
          <div class="upload-list-cover">
            <Icon type="ios-loop-strong"></Icon>
          </div>
        </div>
      </div>
    </Upload>
  </div>
</template>

<script>
export default {
  name: 'goods-image-util',
  data () {
    return {
    }
  },
  methods: {
    // 文件格式不是图片时提醒
    handleFormatError () {
      this.$Message.error('必须要是图片(jpg,jpeg,png)格式')
    },
    // 图片超出大小时提醒
    handleMaxSize () {
      this.$Message.error('图片太大了，我受不了了')
    },
    // 上传图片前触发，阻止上传进入切图操作
    handleBeforeUpload (e) {
      let file = {
        e,
        name: this.params.row.goodsSkuId,
        imgPath: this.params.row.goodsSkuImagePath,
        params: this.params
      }
      this.$emit('setImage', file)
      return false
    }
  },
  props: ['skuImg', 'params'],
  components: {
  },
  created () {}
}
</script>

<style scoped>
  .ivu-upload{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    margin-right: 10px;
    padding: 2px;
    cursor: pointer;
  }
  .img{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    text-align: center;
  }
  .img:hover .upload-list-cover{
    display: block;
  }
  .upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 10px 0 0 0;
  }
</style>
